<!DOCTYPE html>
<%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8" contentType="text/html;charset=utf-8"%>
<html>
<head>
<title>${name_china}管理</title>
<%@include file="/common/head.jsp" %>
<link href="<%=request.getContextPath()%>/static/plugin/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
<script src="<%=request.getContextPath()%>/static/plugin/zTree/js/jquery.ztree.all-3.5.min.js"></script>
<style>
	#content {
        position: absolute;
        top: 0;
        left: 240px;
        right: 10px;
        bottom: 0;
        box-sizing: border-box;
    }
    ul.ztree {
       width: 230px;
    }
</style>
</head>
<body class="iframe-page">
    <div class="tree-wrap">
    <div class="tree-title">${name_china}列表</div>
    <div class="tree-content">
	    <ul id="treeList" class="ztree"></ul>
	</div>
	</div>
	
	
	<div id="content">
  		<iframe id="treeFrame" frameborder="0" style="width: 100%;height: 100%"></iframe>
	</div>

	<div id="treeMenu" style="width:120px;">
	     <div id="add" iconCls="icon-create">新建子节点</div>
	     <div id="edit" iconCls="icon-edit">编辑节点</div>
	     <div id="delete" iconCls="icon-delete">删除节点</div>
	</div>

<script>
	var treeFrame = document.getElementById('treeFrame'),
		currentNode = "",
		ztree;
	$(function() {
		initTree('treeList',CONST_URL.LIST,'id','parentId');
		treeFrame.src = CONST_URL.INIT;
		initRightMenu("treeMenu");
	});
	
	// 加载组织机构树
	function  initTree(treeId,url,id,pId) {
		var setting = {
			data: {
				simpleData: {
					enable: true,
					idKey: id,
					pIdKey: pId
				}
			},
			async: {
				enable: true
			},
			edit: {
				enable: false,
				drag: {
					isMove: false
				}
			},
			callback: {
				onClick: viewTree,
				onRightClick: showTreeMenu
			}
		};
		
		$.sajax({
			url: url + '?random=' + Math.random() * 1000000,
			onLoadSuccess: function(data) {
				ztree = $.fn.zTree.init($('#' + treeId),setting,data.data);
				expandNode();
			}
		});
	}
	
	 // 展开树节点
    function expandNode() {
    	// nodeId为空,展开根节点
        var node = ztree.getNodeByParam('parentId', null, null);
      
        ztree.expandNode(node, true, false, true);
       
        ztree.selectNode(node);
       
       
    }
	
	
	//初始化右键菜单
	function initRightMenu(menuId) {
		$('#' + menuId).menu({
            onClick: function(item){
            	if (item.id == 'add') {
            		addOrg(currentNode);
            	} else if (item.id == 'edit') {
            		editOrg(currentNode);
            	} else if (item.id == 'delete') {
            		deleteTree(currentNode);
            	}
            }
        }); 
	}
	
	//新建
	function addOrg(node) {
		//alert(node.parentId);
		if(node.parentId){
			$.stip({
            	type:'info',//显示类型 有info、 ok、 danger
	            text: '只能新建一级菜单！'
            });
		}else{
			treeFrame.src = CONST_URL.INIT_ADD + "?id=" + node.id;
			//选中节点
			ztree.selectNode(node);
		}
	}
	
	//编辑
	function editOrg(node) {
		treeFrame.src = CONST_URL.INIT_EDIT + "?id=" + node.id;
		ztree.selectNode(node);
	}
	
	//删除
	function deleteTree(node) {
		if(node.parentId){
			$.sdialog({
	     		type: 'confirm',
	     		msg: '您确定要删除<'+node.name+'>节点吗? 删除时会将该节点下的子节点一并删除',
	     		onConfirm: function(result) {
	     			if(result){
	     				$.sajax({
	     	                url: CONST_URL.DEL+'?id='+node.id,
	     	                onLoadSuccess: function (data) {
	                            $.stip({
	                            	type:'ok',//显示类型 有info、 ok、 danger
	             	                text: '删除成功！',
	             	                onBeforeHide: function () {
	             	                	refreshList(node.pCode);
	             	                }
	                            });
	     	                }
	     	            });
	     			}
	     		}
	     	});
		}else{
			$.stip({
            	type:'info',//显示类型 有info、 ok、 danger
	            text: '不能删除顶级分类！'
            });
		}
	}
	
	//查看
	function viewTree(event, treeId, treeNode) {
		var url = CONST_URL.INIT_VIEW + "?id=" + treeNode.id;
		if(!treeNode.pId) {
			url = CONST_URL.INIT_VIEW + "?id=" + treeNode.id;
		}
		treeFrame.src = url;
	}
	
	//显示右键菜单
	function showTreeMenu(event, treeId, treeNode) {
		//点击节点时显示右键菜单，防止没有点击节点时出现右键菜单
		if(treeNode) {
			currentNode = treeNode;
			//显示和隐藏删除
			var item = $('#treeMenu').menu('getItem', $('#delete')[0]);
			/*
            if(!currentNode.pCode) {
                $('#treeMenu').menu('disableItem', item.target);
            } else {
            	$('#treeMenu').menu('enableItem', item.target);
            }*/
			
            //右键菜单显示
			$('#treeMenu').menu('show',{left: event.pageX, top: event.pageY});
			
		}
	}
	
	// 刷新页面
	function refreshList(expandCode, isContinue) {
		var url = CONST_URL.INIT_MAIN ;
		// 继续添加
		if (isContinue) {
			var node = ztree.getNodeByParam("code", expandCode, null);
            ztree.setting.async.url = CONST_URL.GET_TREE + "?pCode=" + expandCode;
            node.isParent = true;
            ztree.updateNode(node);
            ztree.reAsyncChildNodes(node, "refresh");
		} else {
		   window.location.href = url + '?expandCode=' + expandCode;
		}
	}
	
	//请求url
	var CONST_URL = {
		INIT_MAIN: basePath + "${common_url}init", 
	    LIST: basePath + "${common_url}list",
	    GET_TREE: basePath + "${common_url}getTree",
	    INIT_ADD: basePath + "${common_url}initAdd",
	    INIT_EDIT: basePath + "${common_url}initEdit",
	    INIT_VIEW: basePath + "${common_url}initView",
	    INIT: basePath + "${common_url}src",
	    DEL: basePath + "${common_url}del"
	};
</script>
</body>
</html>
